<template>
	<view class="login-container">
		<!-- 小程序提示 -->
		<view v-if="isWeChatMiniProgram" class="wechat-tip">
			<text>小程序暂不支持登录</text>
		</view>

		<!-- 非小程序：显示登录页 -->
		<view v-else class="content-wrapper">
			<!-- 头部 -->
			<view class="header">
				<image src="/static/images/logo.png" class="avatar" />
				<text class="welcome">终于等到你 ~</text>
			</view>

			<!-- 提示信息 -->
			<view class="tip-box">
				<text class="tip-title">账号提示</text>
				<text class="tip-content">
					您的账号信息不完整，为了账号安全，请补全信息
				</text>
			</view>

			<!-- 登录/注册切换标签 -->
			<view class="tab-switch">
				<text :class="['tab-item', { active: currentTab === 'login' }]" @click="switchTab('login')">
					登录
				</text>
				<text :class="['tab-item', { active: currentTab === 'register' }]" @click="switchTab('register')">
					注册
				</text>
			</view>

			<!-- 表单区域 -->
			<view class="form-container">
				<!-- 登录表单 -->
				<view v-if="currentTab === 'login'" class="form-group">
					<input v-model="loginForm.username" placeholder="请输入账号" class="input-field" type="text" />
					<input v-model="loginForm.password" placeholder="请输入密码" class="input-field" type="password" />
					<button class="submit-btn" @click="handleLogin">登录</button>
				</view>

				<!-- 注册表单 -->
				<view v-else class="form-group">
					<input v-model="registerForm.username" placeholder="请输入账号" class="input-field" type="text" />
					<input v-model="registerForm.password" placeholder="请输入密码" class="input-field" type="password" />
					<input v-model="registerForm.confirmPassword" placeholder="请确认密码" class="input-field"
						type="password" />
					<button class="submit-btn" @click="handleRegister">注册</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from 'vue';

	import {
		apiUserLogin,
		apiUserRegister
	} from "@/api/apis.js"

	// 当前标签页
	const currentTab = ref('login');

	// 登录表单
	const loginForm = ref({
		username: '',
		password: '',
		role: 'USER'
	});

	// 注册表单
	const registerForm = ref({
		username: '',
		password: '',
		confirmPassword: '',
		role: 'USER'
	});

	// 判断是否为微信小程序（所有小程序平台）
	const isWeChatMiniProgram = computed(() => {
		// #ifdef MP-WEIXIN
		return true;
		// #endif
		return false;
	});

	// 切换标签
	const switchTab = (tab) => {
		currentTab.value = tab;
	};

	// 登录处理
	const handleLogin = async () => {
		const {
			username,
			password
		} = loginForm.value;
		if (!username || !password) {
			uni.showToast({
				title: '请输入账号和密码',
				icon: 'none'
			});
			return;
		}


		const res = await apiUserLogin(loginForm.value)

		if (res.code === "200") {

			uni.showToast({
				title: '登录成功',
				icon: 'success'
			});

			uni.setStorageSync("userInfo", JSON.stringify(res.data))

			uni.switchTab({
				url: '/pages/index/index'
			});

		}


	};

	// 注册处理
	const handleRegister = async () => {
		const {
			username,
			password,
			confirmPassword
		} = registerForm.value;
		if (!username || !password || !confirmPassword) {
			uni.showToast({
				title: '请填写完整信息',
				icon: 'none'
			});
			return;
		}
		if (password !== confirmPassword) {
			uni.showToast({
				title: '两次密码不一致',
				icon: 'none'
			});
			return;
		}


		const res = await apiUserRegister(registerForm.value)

		if (res.code === "200") {

			uni.showToast({
				title: '注册成功',
				icon: 'success'
			});

			registerForm.value = {}
		}

	}
	
</script>

<style lang="scss" scoped>
	// 纸境壁纸风格配色
	$primary: #5d7a7a; // 主色：灰青
	$secondary: #a3b18a; // 点缀：橄榄绿
	$light-bg: rgba(248, 249, 245, 0.95); // 背景：米白半透
	$text-dark: #2c3636; // 文字：深灰
	$text-light: #6b7a7a; // 辅助文字
	$border-light: rgba(163, 177, 138, 0.2);

	// 渐变背景模拟纸境氛围
	.login-container {
		position: relative;
		width: 100%;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		background: linear-gradient(135deg, #f0f2ee 0%, #d8e0db 50%, #c4ccc7 100%);
		font-family: 'ZCOOL QingKe HuangYou', 'PingFang SC', 'Microsoft YaHei', sans-serif;
		min-height: 100vh;
	}

	// 毛玻璃卡片容器
	.content-wrapper {
		width: 90%;
		max-width: 400px;
		background: $light-bg;
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		border-radius: 20px;
		border: 1px solid $border-light;
		box-shadow: 0 10px 30px rgba(44, 54, 54, 0.12);
		padding: 28px 24px;
		overflow: hidden;
		transition: all 0.3s ease;
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12px;
		margin-bottom: 20px;
	}

	.avatar {
		width: 52px;
		height: 52px;
		border-radius: 50%;
		border: 2px solid $secondary;
		object-fit: cover;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
	}

	.welcome {
		font-size: 15px;
		color: $text-light;
		font-style: italic;
		letter-spacing: 1px;
	}

	// 提示框
	.tip-box {
		background: rgba(163, 177, 138, 0.1);
		border: 1px solid $border-light;
		border-radius: 12px;
		padding: 14px;
		margin-bottom: 22px;
		font-size: 13px;
	}

	.tip-title {
		font-weight: 600;
		color: $text-dark;
		font-size: 15px;
		display: block;
		margin-bottom: 6px;
	}

	.tip-content {
		color: $text-light;
		line-height: 1.5;
	}

	// 标签切换
	.tab-switch {
		display: flex;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 10px;
		padding: 4px;
		margin-bottom: 24px;
		width: fit-content;
		margin-left: auto;
		margin-right: auto;
	}

	.tab-item {
		padding: 6px 16px;
		font-size: 15px;
		color: $text-light;
		border-radius: 8px;
		transition: all 0.3s ease;
		cursor: pointer;
	}

	.tab-item.active {
		background: $secondary;
		color: white;
		font-weight: 500;
	}

	// 表单区域
	.form-container {
		.input-field {
			width: 100%;
			padding: 12px 14px;
			background: rgba(255, 255, 255, 0.7);
			border: 1px solid $border-light;
			border-radius: 10px;
			font-size: 14px;
			color: $text-dark;
			margin-bottom: 14px;
			backdrop-filter: blur(5px);
			transition: all 0.3s ease;

			&:focus {
				border-color: $primary;
				background: rgba(255, 255, 255, 0.9);
				box-shadow: 0 0 0 2px rgba(93, 122, 122, 0.2);
			}
		}

		.submit-btn {
			width: 100%;
			padding: 12px;
			background: linear-gradient(to right, $primary, darken($primary, 10%));
			color: white;
			border: none;
			border-radius: 10px;
			font-size: 16px;
			font-weight: 500;
			margin-top: 6px;
			box-shadow: 0 4px 12px rgba(93, 122, 122, 0.2);
			transition: all 0.3s ease;

			&:active {
				transform: translateY(1px);
				box-shadow: 0 2px 6px rgba(93, 122, 122, 0.2);
			}
		}
	}

	// 小程序提示
	.wechat-tip {
		text-align: center;
		padding: 40px 20px;
		color: $text-light;
		font-size: 16px;
		background: linear-gradient(135deg, #f0f2ee 0%, #d8e0db 100%);
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-style: italic;
	}
</style>